現在網頁為了 RWD ，在 layout 的 navbar 跟 footer 都會固定，而網頁最上方都會有一個 navbar，裡面會有 logo 還有一些選項，這次就來寫一個 navbar 吧!

這次以音樂為主題來寫一個網頁，從 navbar 開始，會像下圖這樣

首先， HTML 會這樣寫

 <div class="navbar">
         <div class="container">
         設定一個範圍
            <div class="logo">
            這是 LOGO 區
                <a href="#">
                   <i class="fas fa-music"></i>MusicIsGood
                </a>
                將 LOGO 跟 標題綁在一起，這裡應該要寫個 <h1>，不過先保留，等之後網頁需要再決定
            </div>

            <ul class="menu">
                <li><a href="#" target="_blank">華語</a></li>
                <li><a href="#" target="_blank">西洋</a></li>
                <li><a href="#" target="_blank">東洋</a></li>
                <li><a href="#" target="_blank">鄉村</a></li>
            </ul>
歌曲曲風用四個選單來表示
        </div>
    </div>

再來寫 CSS，先到 meyerweb 網站複製裡面的程式碼，讓瀏覽器所有數值都 reset，不過我用的是 SCSS來寫，所以程式碼會如下:

 .navbar{
    background-color: #333;
    height: 50px;
}
先把 navbar 的背景設定好，因為頁頭的 layout 是不太會變的，所以高度可以寫固定。

.container{
    width: 1024px;
    margin: 0 auto;
寫一個限制寬度，因為在螢幕上人眼的角度是有限的，設定一個比較舒服的寬度是很重要的事情。    
}

.logo{
    display:inline;
    因為在 <div> 標籤中預設是 display:block，會佔滿整排空間，所以改成 inline，就不會檔到後面的選單。
    a{
        color:#ffc078;
        margin-top: 1em;
        margin-bottom: 1em;
        text-decoration: none;
        line-height:50px;
        font-size: 24px;
    }
    設定 LOGO 文字，應該這邊要寫一個 <h1>，但是可能後面會需要，所以先保留，之後再來優化。
    .fa-music{
        color:#ffc078;
        margin-right: 1em;
       }
把 fontawesome 圖案改顏色，這其實是文字，不是圖案。
}
.menu{
    float:right;
    把選單擺右邊
    li{
        float:left;
        把選單內容要並排呈現。
    }
        a{
        display:flex;
        margin-right: 30px;
        color:#ffc078;
        text-decoration: none;
        line-height:50px;
        padding: 0 1em;
    }
    a 連結的設定
    a:hover{
        background-color:  #ffc078;
        color:#333
    }
    a 連結的滑鼠移動過去的效果
}

然後畫面就完成了，codepen在這
https://codepen.io/hnzxewqw/pen/yLBzrOe